<template>
  <ul class="tw-text-dialog" :class="{xcolumn: isColumn}">
    <li class="tw-text-dialog-item"
      :class="{xhashref: item.href}"
      v-for="(item, idx) in data"
      :key="idx"
      @click="clickItem(item)">
      <div class="tw-text-dialog-item-iconbox">
        <img v-if="icons[idx]" class="xicon" :src="`${$twApp.fileBaseUrl}${icons[idx].localPath}`" />
      </div>

      <div class="tw-text-dialog-item-body">
        <h3 class="tw-text-dialog-item-title">{{item.title}}</h3>
        <div class="tw-text-dialog-item-des">
          <span>{{item.content}}</span>
        </div>
      </div>
    </li>
    <el-dialog :center="true" :model="false"
      :append-to-body="true"
      :modal-append-to-body="false"
      title="提示" custom-class="xtextdialog" :show-close="false"
      :visible.sync="dialogVisible"
      width="80%"
      :close-on-click-modal="true"
      :before-close="handleClose">
        <div slot="title" class="tw-dialog-title">
          <span>均衡度L1~L32指标说明</span>
        </div>

        <div class="tw-textdialog-body">
          <div class="tw-textdialog-datalist" v-for="(item, index) in dialogdata" :key="index">
            <div class="xtitle">{{item.title}}</div>
            <div class="xcontent" v-for="(itm, idx) in item.content" :key="idx">{{itm}}</div>
          </div>
          <!-- <div class="tw-textdialog-datalist">
            <div class="xtitle">资源配置</div>
            <div class="xcontent">L1,每百名学生每百名学生每百名学生每百名学生每百名学生每百名学生</div>
            <div class="xcontent">L1,每百名学生</div><div class="xcontent">L1,每百名学生</div>
            <div class="xcontent">L1,每百名学生</div><div class="xcontent">L1,每百名学生</div>
            <div class="xcontent">L1,每百名学生</div><div class="xcontent">L1,每百名学生</div>
            <div class="xcontent">L1,每百名学生</div><div class="xcontent">L1,每百名学生</div>
            <div class="xcontent">L1,每百名学生</div><div class="xcontent">L1,每百名学生</div>
            <div class="xcontent">L1,每百名学生</div><div class="xcontent">L1,每百名学生</div>
            <div class="xcontent">L1,每百名学生</div><div class="xcontent">L1,每百名学生</div>
            <div class="xcontent">L1,每百名学生</div><div class="xcontent">L1,每百名学生</div>
            <div class="xcontent">L1,每百名学生</div><div class="xcontent">L1,每百名学生</div>
            <div class="xcontent">L1,每百名学生</div>
          </div>
          <div class="tw-textdialog-datalist">
            <div class="xtitle">资源配置</div>
            <div class="xcontent">L1,每百名学生</div>
            <div class="xcontent">L1,每百名学生</div>
          </div>
          <div class="tw-textdialog-datalist">
            <div class="xtitle">资源配置</div>
            <div class="xcontent">L1,每百名学生</div>
            <div class="xcontent">L1,每百名学生</div>
          </div> -->
        </div>
        <div slot="footer" class="tw-textdialog-footer">
          <a class="xbotton" @click="dialogVisible = false">关 闭</a>
        </div>
    </el-dialog>
  </ul>
</template>

<script>
import props from './props'
import style from '../tw-lib-base/style'
import border from '../tw-lib-base/border/mixins'

export default {
  name: 'web-text-dialog',

  mixins: [props, style, border],

  props,

  data () {
    return {
      dialogVisible: false
    }
  },

  computed: {
    style () {
      return Object.assign({
        itemBg: this.itemBg,
        itemPadding: this.itemPadding,
        iconWidth: this.iconWidth,
        iconHeight: this.iconHeight,
        titleFontSize: this.titleFontSize,
        titleFontColor: this.titleFontColor,
        desFontSize: this.desFontSize,
        desFontColor: this.desFontColor,
        hasBorder: this.hasBorder
      }, this.borderStyle)
    }
  },

  methods: {
    clickItem (item) {
      this.dialogVisible = true
    },
    handleClose () {
      this.dialogVisible = false
    },

    setStyle () {
      let style = `
        ::root > .tw-text-dialog-item {
          height: calc(${this.iconHeight} + ${this.itemPadding});
          background: ${this.itemBg};
          border-radius: ${(parseInt(this.iconSize) + parseInt(this.itemPadding)) / 2}px;
        }

        ::root > .tw-text-dialog-item > .tw-text-dialog-item-iconbox  {
          width: ${this.iconWidth};
          height: ${this.iconHeight};
        }

        ::root > .tw-text-dialog-item .tw-text-dialog-item-title {
          font-size: ${this.titleFontSize};
          color: ${this.titleFontColor};
        }

        ::root > .tw-text-dialog-item .tw-text-dialog-item-des {
          font-size: ${this.desFontSize};
          color: ${this.desFontColor};
        }

      `

      if (this.hasBorder) {
        style += `
          ::root > .tw-text-dialog-item {
            border: ${this.borderSize} ${this.borderType} ${this.borderColor};
        }
        `
      }

      this.addStyle(style)
    }
  }
}
</script>

<style lang="scss">
  @import './css/index.scss';
</style>
